<template>
  <van-popup v-model="value" class="popup" :close-on-click-overlay="false">
    <div class="bind-clinic">
      <div class="title">1.关注接种门诊</div>
      <div class="tip">请选择您所属区域的接种门诊,以便接收最新公告消息,得到更加便携的接种服务.</div>
      <clinic-select/>
      <div style="text-align:center;">
        <van-button type="primary" size="small">下一步</van-button>
      </div>

      <div class="title">2.接种人管理</div>
      <div class="tip">请您务必填写真实的接种者信息,以便能够顺利接种!</div>
      <ValidationObserver
        ref="observer"
        v-slot="{ passes, invalid }"
        tag="form"
        @submit.prevent="submit()"
      >
        <van-cell-group>
          <ValidationProvider name="姓名" rules="required|isName" v-slot="{ errors }">
            <van-field
              v-model="form.name"
              placeholder="请输入姓名"
              label="姓名"
              clearable
              :error-message="errors[0]"
            />
          </ValidationProvider>

          <ValidationProvider name="身份证号" rules="required|isIdCard" v-slot="{ errors }">
            <van-field
              v-model="form.idCard"
              placeholder="请输入身份证号"
              label="身份证号"
              clearable
              :error-message="errors[0]"
            />
          </ValidationProvider>

          <calendar/>


          <ValidationProvider name="联系方式" rules="required|isPhone" v-slot="{ errors }">
            <van-field
              v-model="form.phone"
              placeholder="请输入联系方式"
              label="联系方式"
              clearable
              :error-message="errors[0]"
            />
          </ValidationProvider>
        </van-cell-group>
        <div class="btn-wrapper">
          <van-button type="primary" block :disabled="invalid" round color="#FF6363">提交</van-button>
        </div>
      </ValidationObserver>
      <div style="text-align:center;">
        <van-button type="primary" size="small">开始使用</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
import AreaSelect from "@/components/area";
import Clinic from "@/components/clinic";
import ClinicSelect from "@/components/clinicSelect";
import Calendar from '@/components/calendar';
import router from "@/router";
export default {
  data() {
    return {
      value: false
    };
  },
  created() {
    console.log("popup");
    console.log(this);
  },
  components: { AreaSelect, Clinic, ClinicSelect,Calendar },
  methods: {
    show(opt) {
      this.value = true;
    },
    close() {
      this.value = false;
    },
    sure() {
      this.close();
      router.push("/home");
    },
    toAuth() {
      this.close();
      router.push("/userInfo");
    }
  }
};
</script>

<style lang='scss' scoped>
.bind-clinic {
  width: 100%;
  height: 8rem /* 600/75 */;
  padding: 0.53rem /* 40/75 */ 0.27rem /* 20/75 */;
  background: #ffffff;
  .title {
    font-size: 0.4rem /* 30/75 */;
    color: $baseColor;
    text-align: center;
    margin-bottom: 0.24rem /* 18/75 */;
  }
  .tip {
    text-indent: 2em;
    line-height: 1.6;
    font-size: 0.32rem /* 24/75 */;
    margin-bottom: 0.24rem /* 18/75 */;
  }
}
.popup {
  width: 80%;
}
</style>
